<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('维护实验项目')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: summernote-css"/>
    <script>
        function report() {
            $("#form-experiment-edit").attr("hidden", true)
            $("#form-experiment-edit1").attr("hidden", false)
        }

        function basicInformation() {
            $("#form-experiment-edit").attr("hidden", false)
            $("#form-experiment-edit1").attr("hidden", true)
        }
    </script>
</head>
<body class="white-bg">
<div class="container">
    <div class="row">
        <div class="col-xs-12" style="text-align: center">
            <h2 th:text="${onlineExperiment.onlineExperimentName}"></h2>
        </div>
        <br>
        <br>
        <br>
        <br>
        <div class="col-xs-12">
            <div class="col-xs-4"></div>
            <div class="col-xs-3">
                <span class="fa fa-bars" style="font-size: 80px;" onclick="basicInformation()"></span>
                <br>
                <span style="font-size: 20px" onclick="basicInformation()">基本信息</span>
            </div>
            <div class="col-xs-3">
                <span class="fa fa-file-word-o" style="font-size: 80px;" onclick="report()"></span>
                <br>
                <span style="font-size: 20px" onclick="report()">实验报告</span>
            </div>
            <div class="col-xs-2"></div>
        </div>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-experiment-edit" th:object="${onlineExperiment}" method="post">
        <input name="onlineExperimentId" th:field="*{onlineExperimentId}" type="hidden" id="onlineExperimentId">
        <div class="form-group">
            <label class="col-sm-3 control-label">在线实验名称：</label>
            <div class="col-sm-8">
                <input name="onlineExperimentName" id="onlineExperimentName" th:field="*{onlineExperimentName}"
                       class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">在线实验网址：</label>
            <div class="col-sm-8">
                <input name="onlineExperimentUrl" id="onlineExperimentUrl" th:field="*{onlineExperimentUrl}"
                       class="form-control" type="text" readonly>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">专业：</label>
            <div class="col-sm-8">
                <!--<input name="profession" th:field="*{profession}" class="form-control" type="text">-->
                <select name="profession" class="form-control" id="profession"
                        th:with="dicts=${@dict.getType('sys_profession')}" disabled>
                    <option th:each="dict:${dicts}" th:value="${dict.dictValue}" th:text="${dict.dictLabel}"
                            th:field="*{profession}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">封面上传：</label>
            <!--前端如何显示回显图片？？-->
            <div class="col-sm-8">
                <div class="form-group">
                    <div class="file-loading">
                        <input id="file" type="file" multiple name="file">
                        <input th:field="*{onlineExperimentImg}" id="onlineExperimentImg" hidden="hidden"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-4">
                <button class="btn btn-primary" type="button" style="width: 80px;height: 60px"
                        onclick="messageBaoCun()">保存
                </button>
            </div>
        </div>
    </form>

    <form class="form-horizontal m" th:object="${onlineExperiment}" hidden="hidden" id="form-experiment-edit1"
          method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label">实验描述：</label>
            <!--前端如何显示回显图片？？-->
            <input type="hidden" th:value="*{onlineExperimentIntroduce}" name="onlineExperimentIntroduce"
                   id="onlineExperimentIntroduce"/>
            <div class="col-sm-10">
                <div class="form-group">
                    <div class="summernote1"></div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">实验报告：</label>
            <input type="text" th:value="*{onlineExperimentReport}" name="onlineExperimentReport"
                   id="onlineExperimentReport" hidden/>
            <div class="col-sm-10">
                <div class="form-group">
                    <div class="summernote2">
                        <div class="container">
                            <table class="table">
                                <tr><td width="100/6%">实验名称</td><td width="100/6%"></td><td width="100/6%">专业/班级</td><td width="100/6%"></td><td width="100/6%">实验日期</td><td width="100/6%"></td></tr>
                                <tr><td>姓名</td><td></td><td>学号</td><td></td><td>指导教师</td><td></td></tr>
                                <tr><td>实验成绩</td><td colspan="5"></td></tr>
                                <tr><td colspan="6" style='height: 100px'><p>一：实验目的</p></td></tr>
                                <tr><td colspan="6" style='height: 100px'><p>二：实验步骤</p></td></tr>
                                <tr><td colspan="6" style='height: 100px'><p>三：实验心得(实验收获：发现的问题及解决情况；改进建议)</p></td></tr>
                                <tr><td colspan="6" style='height: 100px'><p>四：指导教师评价</p></td></tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-4">
                <button class="btn btn-primary" type="button" style="width: 80px;height: 60px" onclick="reportBaoCun()">
                    保存
                </button>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: summernote-js"/>
<script type="text/javascript">
    $("#form-experiment-edit").validate({
        focusCleanup: true
    });

    $('.summernote1').summernote({
        placeholder: '请输入实验介绍',
        height: 500,
        lang: 'zh-CN',
        followingToolbar: false,
        callbacks: {
            onImageUpload: function(files, editor, $editable) {
                var formData = new FormData();
                formData.append("file", files[0]);
                $.ajax({
                    type: "POST",
                    url: ctx + "common/upload",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function(result) {
                        if (result.code == web_status.SUCCESS) {
                            //alert(result.url+","+result.fileName)
                            $('.summernote1').summernote('editor.insertImage', result.url, result.fileName);
                        } else {
                            $.modal.alertError(result.msg);
                        }
                    },
                    error: function(error) {
                        $.modal.alertWarning("图片上传失败。");
                    }
                });
            }
        }
    });
    $('.summernote2').summernote({
        placeholder: '请输入实验报告模板',
        height: 500,
        lang: 'zh-CN',
        followingToolbar: false,
        callbacks: {
            onImageUpload: function(files, editor, $editable) {
                var formData = new FormData();
                formData.append("file", files[0]);
                $.ajax({
                    type: "POST",
                    url: ctx + "common/upload",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function(result) {
                        if (result.code == web_status.SUCCESS) {
                            //alert(result.url+","+result.fileName)
                            $('.summernote2').summernote('editor.insertImage', result.url, result.fileName);
                        } else {
                            $.modal.alertError(result.msg);
                        }
                    },
                    error: function(error) {
                        $.modal.alertWarning("图片上传失败。");
                    }
                });
            }
        }
    });
    if ($("#onlineExperimentIntroduce").val().length > 0) {
        $('.summernote1').summernote('code', $("#onlineExperimentIntroduce").val());
    }
    if ($("#onlineExperimentReport").val().length > 0) {
        $('.summernote2').summernote('code', $("#onlineExperimentReport").val());
    }

    var prefix = ctx + "system/OnlineExperimentTend";

    //基本信息的修改保存
    function messageBaoCun() {
        if ($.validate.form()) {
            var formData = new FormData();
            formData.append("onlineExperimentId", $("#onlineExperimentId").val());
            formData.append("onlineExperimentName", $("#onlineExperimentName").val());
            //formData.append("onlineExperimentIntroduce", $(".summernote1").summernote("code").toString());
            //console.log($(".summernote1").summernote("code"));
            if ($("#file").val()!=null || $("#file").val!=undefined) {
                formData.append("file", $("#file")[0].files[0]);
            }
            $.ajax({
                url: prefix + '/edit',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function (data) {
                    $.operate.successCallback(data);
                }
            })
        }
    }

    //实验报告的修改保存
    function reportBaoCun() {
        var onlineExperimentReport = $(".summernote2").summernote("code");
        var onlineExperimentId = $("#onlineExperimentId").val();
        var onlineExperimentIntroduce=$(".summernote1").summernote("code");

        if(onlineExperimentIntroduce==null || onlineExperimentIntroduce=='' || onlineExperimentIntroduce==undefined || onlineExperimentIntroduce=='<p><br></p>'){
            $.modal.msg("请填写实验描述")
        }else{
            //console.log(onlineExperimentReport)
            $.ajax({
                url: prefix + '/edit1',
                type: 'post',
                data: JSON.stringify({
                    onlineExperimentId: onlineExperimentId,
                    onlineExperimentIntroduce:onlineExperimentIntroduce,
                    onlineExperimentReport: onlineExperimentReport
                }),
                contentType: "application/json;charset=UTF-8",
                success: function (data) {
                    $.operate.successCallback(data);
                }
            })
        }
    }

    //格式化文件上传
    $('#file').fileinput({
        allowedFileExtensions: ['jpg', 'png', 'gif'],//接收的文件后缀,
        enctype: 'multipart/form-data',
        showBrowse: true,
        showUpload: false, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn-success", //按钮样式
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        initialPreviewAsData: true,
        initialPreviewFileType: 'image',
        initialPreview: ctx + $("#onlineExperimentImg").val(), //要显示的图片的路径
        //msgFilesTooMany: "选择上传的文件数量({2}) 超过允许的最大数值{2}！",
    });
</script>
</body>
</html>